<template>
  <div class="citys">
    <div>
      <div class="back">
        <h2>当前城市</h2>
      </div>
      <div class="citys-list">
        <div class="citys-each">
          <h2 class="each-title">{{ this.$store.state.curCity }}</h2>
        </div>
      </div>
      <div class="back">
        <h2>热门城市</h2>
      </div>
      <div class="citys-list">
        <div class="citys-eachs" v-for="item of list" :key="item.id" @click="changClick(item.name)">
          <h2 class="each-title">{{ item.name }}</h2>
        </div>
      </div>
      <div class="backs" v-for="(item ,key) of cities"
         :key="key">
        <h2 class="backs-zm" :ref="key">{{key}}</h2>
        <div class="chpice border-bottom" v-for="innerItem of item"
                :key="innerItem.id" @click="changClick(innerItem.name)">
          <h2>{{ innerItem.name }}</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityChpice',
  props: {
    list: Array,
    cities: Object,
    letterci: String
  },
  methods: {
    changClick (city) {
      this.$store.dispatch('changCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrapper = document.querySelector('.citys')
    this.croll = new BScroll(wrapper, {
      tap: true,
      click: true
    })
  },
  watch: {
    letterci () {
      this.croll.scrollToElement(this.$refs[this.letterci][0], 300)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .citys
    position absolute
    top 1.76rem
    left 0
    right 0
    bottom 0
    z-index -1
    overflow hidden
  .back
      height 0.7rem
      background #EEEEEE
  .back
    h2
      padding 0.2rem 0.2rem
  .citys-list
    background #FFFFFF
    overflow hidden
  .citys-each
    border 0.02rem #CACACA solid
    width 2.1rem
    height 0.6rem
    margin 0.24rem 0.3rem
  .each-title
    text-align center
    line-height .6rem
    flex 1
  .citys-eachs
    border 0.02rem #CACACA solid
    width 2.1rem
    height 0.6rem
    margin 0.24rem 0 0.24rem 0.3rem
    float left
    display flex
  .backs-zm
    height 0.7rem
    line-height 0.7rem
    padding-left 0.2rem
    background #EEEEEE
  .chpice
    height 0.88rem
    line-height 0.88rem
    overflow hidden
  .chpice
    h2
      padding-left 0.2rem
</style>
